<template>
  <div class="railwayInfo">
    111111111111111112222222222
     <div class="content scroll-box" style="width:70%;margin:50px auto">
      <el-table
        :data="tableData"
        height="90%"
        style="background-color: transparent; width: 100%"
        :row-class-name="tableRowClassName"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(3, 26, 64, 0.6)"
        v-show="loading || tableData.length"
        v-loading="loading"
        empty-text=" "
      >
  <!--      <el-table-column>
          <template slot-scope="props">
            <div
              v-loading="trainDeatilsLoading"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(3, 26, 64, 0.6)">
            </div>
          </template>
        </el-table-column> -->
		<el-table-column
		  align="center"
		  prop="title"
		  label="标题"
		></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="pathogen"
          label="病原体"
        ></el-table-column>
		<el-table-column
		  align="center"
		  prop="site"
		  label="国家"
		></el-table-column> -->
        <el-table-column
          align="center"
          prop="source"
          label="来源"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
       <el-table-column
         align="center"
         prop="url"
         label="关联链接"
         min-width="100"
         show-overflow-tooltip
       >
	   <template slot-scope="scope">

	     <a :href=scope.row.url target="_blank" style="color:#ffffff;font-weight:normal;">点击访问</a>
	   </template>
       </el-table-column>
        <el-table-column
          align="center"
          prop="time"
          label="时间"
        ></el-table-column>

      </el-table>
      <dataEmpty
        emptyTip="暂无信息"
        v-show="!loading && !tableData.length"
      />

	  <!-- 分页组件 -->
	  <div class="pageination" style="margin-top:0px">
		  <el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		  </el-pagination>
	  </div>


    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchContent: {
        page: 1,
        pageSize: 10,
        payload: {},
      },
      tableData: [],
      loading: false,
      noMore: false,
      detailVisible: "",
      trainDeatilsLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    this.trainList();
  },
  methods: {
    async trainList() {
      try {
        this.loading = true;
        const res = await this.$api.news(this.searchContent);
        this.loading = false;
        this.tableData = res.data.rows;
      } catch (error) {
        this.loading = false;
      }
    },

    changePosition() {
      const cpSearchContent = JSON.parse(JSON.stringify(this.searchContent));
      this.searchContent.depCity = cpSearchContent.arrCity;
      this.searchContent.arrCity = cpSearchContent.depCity;
      this.handleSearch();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "row-even";
      } else {
        return "row-odd";
      }
    },
	// 改变每页显示条数
	    handleSizeChange(val) {
	      this.searchContent.pageSize = val;
	      // 重新加载数据
	      this.trainList();
	    },
	    // 改变当前页
	    handleCurrentChange(val) {
	      this.searchContent.page = val;
	      // 重新加载数据
	      this.trainList();
	    }
	}
};
</script>

<style lang="scss" scoped>
.railwayInfo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-line {
    width: 100%;
    height: 64px;
    display: flex;
    margin-bottom: 20px;
    .search-item {
      width: 330px;
      padding: 2px 40px;
      margin-right: 28px;
      background-color: #091739;
      border: 1px solid #15295b;
      cursor: pointer;
      text-align: left;
      position: relative;
      .tip {
        color: #ffffff;
        opacity: 0.5;
      }
    }
    .search-item.icon {
      padding: 0;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 30px;
      color: #fff;
      font-weight: 600;
      border-radius: 50%;
      border: none;
      background: #091739 url(../../../assets/img/icon-ar.png) no-repeat
        center/80% 80%;
    }
    .search-item.time {
      width: 130px;
    }
    .search-item.item-button,
    .search-item .button {
      padding: 0;
      width: 116px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      font-size: 26px;
      color: #ffffff;
      border-radius: 6px;
      background-color: rgba(22, 71, 162, 0.8);
      border: none;
    }
    .search-item.item-button:hover {
      background-color: rgba(22, 71, 162, 1);
    }
  }
  .top-tip {
    text-align: right;
    margin-bottom: 10px;
    padding: 8px 0 8px 20px;
    span {
      font-size: 14px;
      color: #ff0018;
      background-color: rgba(32, 19, 56, 1);
      opacity: 0.7;
      padding-right: 20px;
    }
  }
  ::v-deep.content {
    width: 100%;
    height: 100%;
    .el-table {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      thead {
        color: rgba(0, 212, 255, 1);
        font-size: 20px;
      }
      th.el-table__cell,
      tr,
      .row-odd {
        background-color: rgba(9, 23, 57, 0.9);
      }
      .row-even {
        background-color: rgba(9, 23, 57, 0.5);
      }
      tr:hover > td.el-table__cell {
        // background-color: rgba(9, 23, 57, 0.9);
        background-color: unset;
        // border-color: #0b7fa8;
        color: #fff;
        font-weight: 600;
      }
      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border-color: #063153;
        cursor: pointer;
      }
      .el-icon-caret-bottom {
        font-size: 16px;
      }
    }
    .el-table,
    .el-table__expanded-cell {
      background-color: rgba(9, 23, 57, 1);
    }
    .el-table__expand-icon {
      color: #fff;
    }
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      display: none;
    }
    .el-table__expanded-cell {
      padding-top: 0;
      line-height: 40px;
    }
    .arr-time {
      position: relative;
      .time-tip {
        position: absolute;
        left: calc(100% + 5px);
        top: 0;
        white-space: nowrap;
        font-size: 14px;
        color: #01c1eb;
      }
    }
    .expand-box {
      width: 100%;
      min-height: 200px;
      font-weight: 400;
      ul.header {
        display: flex;
        justify-content: space-around;
        background-color: #071028;
        li {
          width: 120px;
          text-align: center;
        }
      }
      ul.train-detail {
        max-height: 400px;
        background-color: rgba(9, 23, 57, 1);
        z-index: 999;
        top: 100%;
        left: 0;
        padding-top: 10px;
        overflow-y: auto;
        width: 100%;
        li.train-detail-item {
          display: flex;
          justify-content: space-around;
          margin-bottom: 25px;
          .name {
            position: relative;
          }
          span {
            display: block;
            width: 120px;
            text-align: center;
            color: #454956;
          }
        }
        li.train-detail-item .name:before {
          content: "";
          display: block;
          position: absolute;
          width: 12px;
          height: 12px;
          top: 50%;
          transform: translateY(-50%);
          left: -10px;
          border-radius: 50%;
          z-index: 9;
          background-color: #454956;
          box-shadow: 0 0 0 4px rgba(69, 75, 88, 0.4);
        }
        li.train-detail-item .name:after {
          content: "";
          display: block;
          position: absolute;
          width: 2px;
          height: 160%;
          background-color: #02a7d0;
          top: 50%;
          left: -5px;
        }
        li.train-detail-item-active span {
          color: #fff;
        }
        li.train-detail-item-active .name:before {
          background-color: #02a7d0;
          box-shadow: 0 0 0 4px rgba(2, 166, 207, 0.4);
        }
        li.train-detail-item:last-child .name:after {
          display: none;
        }
      }
    }
  }
  .el-pagination{
	  margin-top:20px;
	  text-align: right;
  }
  ::v-deep.el-input--prefix .el-input__inner,
  .el-input--suffix .el-input__inner,
  ::v-deep.el-input__inner {
    padding: 0;
    background-color: transparent;
    border: none;
    color: #cccccc;
    font-size: 16px;
  }
}
@media screen and (max-width: 1919px) {
  .search-item.from,
  .search-item.to {
    width: 230px !important;
  }
}


</style>
